@charset "utf-8";

.mainwrap { position: relative; width:90%; max-width: 1774px !important; margin: 0 auto; }
/*index*/
.indexBg {display:flex; width:100%; overflow:hidden; position:relative; align-content:center; align-items:center; height:100vh; background:url('/img/main/indexBg.jpg') no-repeat center; background-size:cover; text-align:center;}
.indexBg p {color:#fff; line-height:130%;}
.indexH1 {display:block; position:relative; margin-bottom:10px; text-align:center;}
.indexContainer {display:block; position:relative; padding:2% 0;}
.indexContainer .engTESD {margin-bottom:35px; font-size:22px; font-weight:bold; color:#cdeb00;}
.indexContainer .mainTitle {margin:0 auto; font-size:70px; font-weight:bold; line-height:80px;}
.indexContainer .subTitle {margin:0 auto; width:60%; font-size:28px;}
.indexContainer .subTxt {margin:48px 0 0;}
.indexContainer .subTxt>p {font-size:22px; margin-bottom:10px;}
.indexContainer .subTxt .callNum {margin:0 auto 0;}
.indexContainer .subTxt .callNum a[href^=tel] {color: inherit; text-decoration: none; font-weight:bold; font-size:34px; line-height:140%;}
.indexContainer .btnLink {display:block; position:relative; margin:25px 0 0;}
.indexContainer .btnLink>a {display:inline-block; position:relative; padding:24px 83px 24px 43px; border-radius:7px; font-size:18px; color:#fff; border:1px solid #f6f4f9; line-height:100%; transition:.25s all;}
.indexContainer .btnLink>a:hover {color:#cdeb00; border:1px solid #cdeb00; background:#000;}
.indexContainer .btnLink>a::after {position:absolute; right:30px; top:18px; width:22px; height:25px; background:url('/img/inc/ic_download_w.png') no-repeat; content:'';}
.indexContainer .btnLink>a:hover::after {background:url('/img/inc/ic_download.png') no-repeat;}
/*mobile*/
@media screen and (max-width:900px) {
    /*index*/
    .indexBg {background-position:88% top;}
    .indexContainer .engTESD {font-size:18px !important;}
    .indexContainer .mainTitle {font-size:2em !important; line-height:140% !important;}
    .indexContainer .subTitle {width:auto;}
    .indexContainer .subTxt .callNum a[href^=tel] {font-size:1.54em;}
    .indexContainer .btnLink>a {padding:18px 60px 18px 30px;}
    .indexContainer .btnLink>a::after {right:20px; top:13px;}
}

/*main*/
section.fixedVisual {display:block; overflow:hidden; position:relative; height:100vh; text-align: center; background-attachment: fixed; background-size: cover; background-position:left top; background-repeat: no-repeat; margin: 0; padding: 0;}
/*section.fixedVisual:nth-of-type(1) {background-color: transparent;}
section.fixedVisual:nth-of-type(2) {background-color: #fff; background-image: url('/img/main/bg_trackrecord.jpg');}
section.fixedVisual:nth-of-type(3) {background-color: #fff;}*/
section.fixedVisual:nth-of-type(1) {background-color: #fff; background-image: url('/img/main/bg_machinery.jpg');}
section.fixedVisual:nth-of-type(2) {background-color: #fff;}
section.fixedVisual:nth-of-type(3) {background-color: #fff; background-image: url('/img/main/bg_information.jpg')}

.fixedVisual .accordian>ul>li {background-repeat:no-repeat; background-size:cover; background-position-x:20%;}
.fixedVisual .accordian>ul>li:hover>a {margin-bottom:15px;}
.fixedVisual .visual01 {background-image:url('/img/main/visual01.jpg'); background-size:cover;}
.fixedVisual .visual02 {background-image:url('/img/main/visual02.jpg'); background-size:cover;}
.fixedVisual .visual03 {background-image:url('/img/main/visual03.jpg'); background-size:cover;}
.fixedVisual .visual04 {background-image:url('/img/main/visual04.jpg'); background-size:cover;}
.fixedVisual .visual05 {background-image:url('/img/main/visual05.jpg'); background-size:cover;}

.accordian .image_title {background-color:transparent; position: absolute; left: 0; bottom: 0; width: 100%;}
.accordian .image_title a span {display: block; position:relative; color: #fff; text-decoration: none; padding: 56px 0 10px; font-size: 24px; transition:.23s all;}
.accordian .image_title:hover a .name {padding-bottom:40px !important;}

.sloganBx {position:absolute; left:20%; top:50%; width:45%; margin:0 auto; text-align:center; z-index:100; transform:translate(20%, -50%);}
.sloganBx p {color:#fff; font-size:22px; line-height:150%;}
.sloganBx p>span {font-size:52px; font-weight:normal;}
.sloganBx .kor {margin-top:25px;}
.sloganBx .button {display:block; position:relative; font-size:0; padding:30px 0 0; }
.machinery .sloganBx {left:9%; width:60%;}
.business {display:block;}
.business .title {display:block;}
.business .title>p {margin-bottom:23px; color:#fff;}
.business .title .eng {font-size:36px; line-height:70px;color:#1d69c7;}
.business .title .kor {margin-top:20px; font-size:28px;}
.business>.linkContents {display:block; overflow:hidden; position:relative; width:100%; margin:0 auto; box-sizing: inherit;}
.business>.linkContents>ul {display:flex; justify-content:center; align-content:center; align-items:center; width:100%;}
.business>.linkContents>ul>li {width:calc(100% / 4); margin:3px;}
.business>.linkContents>ul .cards {column-gap: var(--gap); margin: var(--gap); height:488px;}
.business>.linkContents>ul .card { --yellow: #cdeb00; --pink: #ff7b89; --color1: var(--yellow); --color2: var(--pink); --inline: 10px; --block: 0; --duration: 150ms; --border: 1px; height:100%; overflow: hidden; cursor: pointer; border:2px solid transparent;}
.business>.linkContents>ul .inner {background: rgba(0,0,0,.85); z-index: 2; padding: 0; height:100%; }
.business>.linkContents>ul .inner:hover {background:#224590;}
.business>.linkContents>ul .inner:hover p {color:#fff;}
.business>.linkContents>ul .card button { display: block; width: 100%; border: 0; color: #000; padding: 10px; position: relative; background:#fff;}
.business>.linkContents>ul .card button:before {content: ""; display: block; width: calc(100% + 2px); height: calc(100% + 2px); position: absolute; top: -1px; left: -1px; z-index: -1; background: linear-gradient(-45deg, var(--color2), var(--color1)); }
.business>.linkContents>ul .tail {transition: all var(--duration); width: var(--inline); height: var(--block); background: var(--color1); position: absolute; top: 0; left: 0; bottom: 0; }
.business>.linkContents>ul .tail.top { background-image: linear-gradient(to right, var(--color1), var(--color2)); height: var(--inline); width: var(--block);}
.business>.linkContents>ul .tail.right { right: 0; left: unset; background: var(--color2); transition-delay: var(--duration); }
.business>.linkContents>ul .tail.bottom { height: var(--inline); width: var(--block); bottom: 0; right: 0; left: unset; top: unset; background-image: linear-gradient(45deg, var(--color1), var(--color2)); transition-delay: 0ms; }
.business>.linkContents>ul .tail.left { bottom: 0; top: unset;}
.business>.linkContents>ul .snake { position: relative; }
.business>.linkContents>ul .snake.start .tail { --block: 0; }
.business>.linkContents>ul .snake:hover .tail { --block: 100%; }
.business>.linkContents>ul .txt {position:absolute; left:30px; bottom:30px; font-size:18px; color:#fff;}
.business>.linkContents>ul .txt>span {font-weight:300;}
.business>.linkContents>ul .ic_link {position:absolute; right:30px; bottom:70px;}
.business>.linkContents>ul .ic_link::before,
.business>.linkContents>ul .ic_link::after {position:absolute; right:18px; content:''; background:#5e5e5e; width:1px; height:18px; transition:.25s all;}
.business>.linkContents>ul .ic_link::before {top:8px; transform:rotate(-45deg);}
.business>.linkContents>ul .ic_link::after {top:20px; transform:rotate(45deg);}
.business>.linkContents>ul .inner:hover .txt>span {font-weight:600;}
.business>.linkContents>ul .inner:hover .ic_link::before {background:#fff;}
.business>.linkContents>ul .inner:hover .ic_link::after {background:#fff;}
.business>.linkContents>ul .inner .ic_link:nth-child(3)::after {position:absolute; right:14px; top:22px; content:''; background:#fff; width:0; height:0; transform:translateX(0);}
.business>.linkContents>ul .inner:hover .ic_link:nth-child(3)::after {width:45px; height:1px; transform:translateX(1);}

.trackRecord .swiper-slide {overflow:hidden; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.34s all;}
.trackRecord .swiper-slide:hover {background:rgba(0,0,0,1);}
.trackRecord .conts .img {width:100%; height:300px;}
.trackRecord .conts .img img {width:100%; height:100%;}
.trackRecord .conts .txt .title{display:inline-block; overflow:hidden; width:100%; font-size:28px; line-height:28px; padding:15px; background:rgba(0,0,0,.75); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff;}
.trackRecord .conts .txt .sublist{padding:10px 25px; text-align:left;}
.trackRecord .conts .txt .sublist>li{color:#fff;}
.trackRecord .conts .txt .sublist .txt1{color:#cdeb00; margin-right:15px;}
.trackRecord .conts .txt .sublist .txt2{font-weight:normal;}
.trackRecord .conts .nonimage {display:flex; justify-content:center; align-items:center; background:#0843af; text-align:center;}
.trackRecord .conts .nonimage img {width:250px; height:auto; }
.trackRecord .swiper-button-next, .trackRecord .swiper-button-prev {color:#fff;}

.news {display:block; position:relative; margin:140px auto 70px;}
.news .title {display:block;}
.news .title .eng {font-size:36px; line-height:70px; color:#fff;}
.news .title .kor {margin:30px auto 0; width:58%; font-size:24px; color:#fff;}
.news .tab{position:absolute; left:0; top:150px; text-align:center; margin:0 auto; z-index:1000;}
.news .tab a{display:block; position:relative; text-align:center; width:162px; height:59px; font-size:18px;}
.news .tab a::before {position:absolute; left:0; top:-13px; background-color:#1d69c7; border-radius:0 25px 25px 0; content:''; width:0; height:47px; transition:.34s all; transform:translateX(0); z-index:-1;}
.news .tab a:hover::before, .news .tab a.active::before {width:193px; height:47px; transform:translateX(1)}
.news .tab a>span {position:relative; color:#fff; padding:0 0 0 25px;}
.news .tab a>span::before {position:absolute; left:4px; top:5px; background:#e5e5e5; width:1px; height:60px; content:''; z-index:10;}
.news .tab a>span::after {position:absolute; left:0; top:5px; background-color:rgba(255,255,255,.64); width:8px; height:8px; content:''; border-radius:100%; z-index:15;}
.news .tab a:nth-child(1)>span::before {position:absolute; left:4px; top:5px; background-color:rgba(255,255,255,.54); width:1px; height:60px; content:'';}
.news .tab a:nth-child(2)>span::before {display:none;}
.news .tab a:hover>span, .news .tab a.active>span {color:#fff;}
.news .tab a:hover>span::after, .news .tab a.active>span::after {background:#fff;}
.news .tab_con {position:relative; overflow-x: hidden; width:100%; height:100%; margin:100px auto 0; }
.news .tab_con .swiper-container {display:block; overflow: visible; position: relative; height:532px; padding-top:48px;}
/*.news .tab_con .overflow_container::before {content: ""; width: 230px; height: 100%; background: #e5eaf5; position: absolute; top: 0; left: 0; z-index: 999;}*/
.news .tab_con .swiper-slide {margin:0 auto; text-align:center;}
.news .tab_con .swiper-slide>a {display:block; overflow:hidden; margin-top:48px; text-align:left; padding:50px; height:298px; background-color:hsla(0,0%,100%,.545); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); vertical-align:bottom; border-radius:10px; transition:.3s all;}
.news .tab_con .swiper-slide>a:hover {background:#2c6fca; border-radius:10px 55px 10px 55px; box-shadow:0 7px 15px 0 rgba(0,0,0,.12); height:408px;margin-top:-48px;}
.news .tab_con .swiper-slide>a:hover .contxt p {color:#fff;}
.news .tab_con .swiper-slide>a:hover .contxt .stxt { height:180px;}
.news .tab_con .swiper-slide.swiper-slide-active>a{margin-top:-48px; background:#1d69c7; border-radius:10px 55px 10px 55px; box-shadow:0 7px 15px 0 rgba(0,0,0,.12); height:408px;}
.news .tab_con .swiper-slide.swiper-slide-active>a:hover{background:#1d69c7; height:408px; }
.news .tab_con .swiper-slide.swiper-slide-active>a .contxt p {color:#fff;}
.news .tab_con .swiper-slide.swiper-slide-active>a .contxt .stxt { height:180px; }
.news .tab_con .contxt .tit {margin-bottom:30px; font-size:28px; line-height:34px;}
.news .tab_con .contxt .stxt {overflow:hidden; height:50px; font-size:16px; margin:0 0 25px; opacity:.33; line-height:24px;}
.news .tab_con .contxt .date {position:absolute; left:50px; bottom:40px; font-size:14px;}
.news .tab_con a:hover .contxt .stxt {opacity:1;}
.news .tab_con .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news .tab_con .swiper-pagination {left:46%; top:80%;}
.news .tab_con .swiper-pagination .swiper-pagination-bullet {text-align:center; margin:0 5px; background-color:rgba(255,255,255,.75);}
.news .tab_con .autoplay-progress {position: absolute; right: 16px;bottom: 16px;z-index: 1000;width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;font-weight: bold;color: var(--swiper-theme-color);}
.news .tab_con .autoplay-progress svg {--progress: 0;position: absolute;left: 0;top: 0px;z-index: 1000;width: 100%;height: 100%;stroke-width: 4px;stroke: var(--swiper-theme-color);fill: none;stroke-dashoffset: calc(125.6 * (1 - var(--progress)));stroke-dasharray: 125.6;transform: rotate(-90deg);}

.information {position:relative; width:100%; text-align:center;}
.information>div {margin:0 auto 100px;}
.information .sloganBx {position:relative; left:0; margin:-70px auto 30px; transform:none;}
.cscenter {display:table; margin:0 auto;}
.cscenter>div {display:table-cell; position:relative; width:calc(100% / 2); padding:0 68px 0 76px;}
.cscenter .tel{text-align:left;}
.cscenter .tel::before{position:absolute; content:''; right:0; top:0; width:1px; height:100%; background:rgba(255,255,255,.3);}
.cscenter .tel .num2 {padding-left:50px;}
.cscenter p, .cscenter p a {color:#fff; font-weight:bold; font-size:30px; line-height:42px;}
footer {background-attachment: fixed; margin: 0; padding: 0; left:0; bottom:0; width:100%; height:242px; background:#fff;}

/*only PC ver.*/
@media screen and (max-width:1600px) {
	#vCon #leftBox{width:70%;}
	#vCon #rightBox{width:30%;}
	.mainwrap {max-width: 100%;}
    .sloganBx {left:10%; width:60%; transform:translateX(10%, -10%)}
    .sloganBx p>span {font-size:44px;}
    .news .tab a:hover::before, .news .tab a.active::before {width:168px;}
    .news .tab_con .overflow_container::before {width:175px;}
    .news .tab_con .contxt .tit {font-size:22px; line-height:28px;}
    .news .tab_con .contxt .stxt {height:46px;}
    .news .tab_con .swiper-slide>a:hover .contxt .stxt { height:170px;}
    .news .tab_con .swiper-slide.swiper-slide-active>a .contxt .stxt { height:170px; }
}
@media screen and (max-width:1300px) {
    .business>.linkContents>ul .inner:hover .ic_link:nth-child(3)::after {display:none;}
}	
@media screen and (min-width:901px) {
    .accordian { overflow:hidden; position:absolute; left:0; top:0; margin: 0 auto; width:100vw; height:100%;}
    .accordian ul {display:flex; position:relative; justify-content:center; align-content:center; align-items:center; width:100%; height:100%;}
    .accordian li::before {position:absolute; left:0; bottom:-504px; content:''; background:url('/img/main/main_visual_HoverBg.png') repeat-x left bottom; width:100%; height:504px; transition:.45s all;
    transform:scaleY(0);}
    .accordian li:hover::before {position:absolute; left:0; bottom:0; content:''; background:url('/img/main/main_visual_HoverBg.png') repeat-x left top; width:100%; height:504px;
    transform:scaleY(100%);}
    .accordian li {position: relative; display: flex; width:calc(100% / 5); height:100%; float: left; opacity:1; border-left: 1px solid rgba(255,255,255,.13); transition: all 0.5s; -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;}
    .accordian li img {height:100%;}
    .accordian ul:hover {width:100%;}
    .accordian ul li:hover {opacity:1;}
    .accordian li img {display: block; text-align:center;}
    .accordian .image_title .button {display:inline-block; position:relative; margin-bottom:0; font-size:15px; text-align:center; transition:.34s all; background: linear-gradient(#224590 0 0) padding-box, linear-gradient(to right, #cdeb00, #f77856, #ff7b89) border-box; color:#fff; padding:18px 45px; border:3px solid transparent; border-radius:0px 25px 0 25px; transform:translateY(-50%); opacity:0;}
    .accordian .image_title:hover a .button {margin-bottom:100px; transition:.34s all; transform:translateY(0); opacity:1;}
    .business>.linkContents>ul>li img{width:100%; height:396px;}
}

/*only MOBILE ver.*/
@media screen and (max-width:1029px) {
    section.fixedVisual {background-position:center;}
    .fixedVisual .accordian {display:block;}
    .fixedVisual .accordian>ul {display:table; width:100vw; height:100vh;}
    .fixedVisual .accordian>ul>li {display:table-row; position:relative; height:calc(100% / 5);}
    .acordianVisual .sloganBx{display:none;}
    .accordian .image_title a span {font-size:18px; padding:30px 0 0;}
    .accordian .image_title a .name {position:absolute; right:40px; bottom:25px;}
    .accordian .image_title:hover a .name {padding-bottom:0 !important;}
    .accordian .image_title .morebtn {position:absolute; left:35px; bottom:20px; color:#fff; font-size:14px; padding:5px 10px; font-weight:normal; border:2px dashed #cdeb00; }
    .accordian .image_title:hover .morebtn {background:rgba(0,0,0,.73);}
    .sloganBx {width:85% !important; left:-10% !important; transform:translateX(5%, 0) !important;}
    .sloganBx p, .business .title .kor, .news .title .kor {font-size:18px;}
    .sloganBx p>span, .business .title .eng, .news .title .eng {font-size:28px;}
    .business .title {margin:80px 30px 30px; font-size:22px;}
    .business>.linkContents>ul .inner>div .photo img {opacity:.34;}
    .business>.linkContents>ul .inner>div:hover .photo img {opacity:.75;}
    .business .businessMobile {display:block; width:100%;}
    .business .businessMobile>div {display:inline-block; position:relative; width:45%; margin:5px;}
    .business .businessMobile>div>a {display:block; background:rgba(0,0,0,.23); padding:15px; border-radius:15px; border:1px dashed rgba(255,255,255,.23); box-sizing:border-box; transition:.34s all;}
    .business .businessMobile>div>a:hover {background:linear-gradient(45deg, #cdeb00 25%, #ff7b89 75%); border:0; color:#000;}
    .trackRecord .conts .txt .title {font-size:26px;}
    /*.news {padding-top:369px; margin-top:120px;}*/
    .sloganBx p, .business .title .kor, .news .title .kor {font-size:16px;}
    .news {margin:352px auto 70px;}
    .news .tab {left:30%; top:auto; margin:34px auto;}
    .news .tab a {display:inline-block;}
    .news .tab a>span {padding:0;}
    .news .tab a>span::after {left:-15px;}
    .news .title .eng {line-height:50px;}
    .news .title .kor {width:90%;}
    .news .tab_con {margin:123px auto 0; width:90%; height:80vh;}
    .news .tab_con .overflow_container::before {display:none;}
    .news .tab_con .swiper-container {overflow:hidden; height:80%;}
    .news .tab_con .swiper-slide>a {padding:29px; width:85%; height:100%;}
    .news .tab_con .swiper-slide.swiper-slide-active>a {overflow:hidden; padding:29px; width:100%; height:350px; border-radius:10px;}
    .news .tab a:hover::before, .news .tab a.active::before {top:-9px; width:150px; height:40px; border-radius:25px;}
    .news .tab a:nth-child(1)>span::before, .news .tab a:nth-child(2)>span::before {display:none;}
    .news .tab_con .contxt .date {left:30px; bottom:20px;}
    .information .sloganBx {left:0 !important;}
    .information>div {margin-bottom:50px;}
    .cscenter {display:block; width:95%; margin:0 auto;}
    .cscenter>div {display:block; padding:15px 0 0; width:100%; text-align:center;}
    .cscenter p, .cscenter p a {font-size:22px; line-height:160%;}
    .cscenter .tel {text-align:center;}
    .cscenter .tel::before {display:none;}
    .cscenter .tel .num2 {padding-left:25px;}
}

@media screen and (max-width:900px) {
    .topBg {height:0 !important;}
    .news .tab {left:24%;}
    .news .tab_con .swiper-pagination {left:32%; top:auto; bottom:0;}
    #footer {z-index:10000;}
    #footer .logo {display:none;}
    /*.business>.linkContents>ul .inner>div .photo img {display:none;}
    .business>.linkContents>ul {display:block; width:100%; margin:0 auto;}
    .business>.linkContents>ul>li {width:100%;}
    .business>.linkContents>ul .cards {padding:5px; margin:0 3px;}
    .business>.linkContents>ul .inner>div .photo img { width:100%; height:150px;}
    .business>.linkContents>ul .ic_link {right:7px;}
    .business>.linkContents>ul .txt {font-size:20px;}
    .business>.linkContents>ul .inner {background:rgba(0,0,0,.42);}
    .business>.linkContents>ul .cards {height:140px;}*/
    .contMotion p img{height:100%;}
}
@media screen and (max-width:560px) {
    .news .tab {left:16%;}
}